<template>
  <div class="">
    <x-header class="header" :left-options="{backText: ''}">项目详情</x-header>
    <div class="content pad">
        <form-preview :header-label="'项目信息'" :header-value="project.project_number" :body-items="items"></form-preview>
        <div v-if="pieDataBuy.length">
            <divider>经仓采购物资</divider>
            
            <Chart width="100%" height="350px" :option="optionPieOut" theme='shine' loading></Chart>       
            <div slot="content" class="card-padding">
                <cell v-for="(x,i) of pieDataBuy" :key="i" :title="x.name" :value="x.value"></cell>
            </div>
           
        </div>
        <div v-if="pieDataBuyDirect.length">
            <divider>直发采购物资</divider>
            
            <Chart width="100%" height="350px" :option="optionPieBuyDirect" theme='shine' loading></Chart>
            <div slot="content" class="card-padding">
                <cell v-for="(x,i) of pieDataBuyDirect" :key="i" :title="x.name" :value="x.value"></cell>
            </div>
           
        </div>
        <div v-if="pieDataOut.length">
            <divider>物资平台出库</divider>
           
            <Chart width="100%" height="350px" :option="optionPieOut" theme='shine' loading></Chart>
            <div slot="content" class="card-padding">
                <cell v-for="(x,i) of pieDataOut" :key="i" :title="x.name" :value="x.value"></cell>
            </div>
          
        </div>
        <div v-if="pieDataOutERP.length">
            <divider>ERP平台出库</divider>
           
            <Chart width="100%" height="350px" :option="optionPieOutERP" theme='shine' loading></Chart>
            <div slot="content" class="card-padding">
                <cell v-for="(x,i) of pieDataOutERP" :key="i" :title="x.name" :value="x.value"></cell>
            </div>
            
        </div>
    </div>
  </div>
</template>

<script>
import { XHeader, FormPreview, Card, Divider, Group, Cell } from "vux";
import Chart from "@/components/Chart";
export default {
  data() {
    return {
      comp_id: this.$route.params["comp_id"] || 2,
      project_code: this.$route.params["project_code"] || 2,
      project: {},
      items: [],
      pieDataBuy: [],
      optionPieBuy: {},
      pieDataBuyDirect: [],
      optionPieBuyDirect: {},
      pieDataOut: [],
      optionPieOut: {},
      pieDataOutERP: [],
      optionPieOutERP: {}
    };
  },
  watch: {
    pieDataBuy: "drawPieBuy",
    pieDataBuyDirect: "drawPieBuyDirect",
    pieDataOut: "drawPieOut",
    pieDataOutERP: "drawPieOutERP"
  },
  mounted() {
    this.$vux.loading.show({
      text: "Loading"
    });
    let labelPair = {
      project_number: "项目编号",
      project_name: "项目名称",
      pm_person_name: "项目经理",
      pjt_status_desc: "项目状态",
      start_date: "开始日期"
    };
    this.$store
      .dispatch("project_erp_one", { project_id: this.project_code })
      .then(resp => {
        this.project = resp.data[0];
        _.forIn(resp.data[0], (v, k) => {
          if (_.has(labelPair, k)) {
            this.items.push({ label: labelPair[k], value: v });
          }
        });
        this.$vux.loading.hide();
      });

    this.$store
      .dispatch("project_info_buy", {
        comp_id: this.comp_id,
        project_code: this.project_code
      })
      .then(resp => {
        this.pieDataBuy = resp.body.items;
      });

    this.$store
      .dispatch("project_info_buy_direct", {
        storecomp_code: this.storecomp_code,
        project_id: this.project_code
      })
      .then(resp => {
        this.pieDataBuyDirect = resp.data;
      });
    this.$store
      .dispatch("project_info_out", {
        comp_id: this.comp_id,
        project_code: this.project_code
      })
      .then(resp => {
        this.pieDataOut = resp.body.items;
      });
    this.$store
      .dispatch("project_info_out_erp", {
        storecomp_code: this.storecomp_code,
        project_id: this.project_code
      })
      .then(resp => {
        this.pieDataOutERP = resp.data;
      });
  },
  methods: {
    drawPieBuy() {
      this.optionPieBuy = {
        title: {
          // text: '全区物资类型分布',
          left: "right"
        },
        tooltip: {},
        itemStyle: {
          normal: {
            shadowBlur: 30,
            shadowColor: "rgba(0, 0, 0, 0.4)"
          }
        },
        series: [
          {
            name: "物资类型",
            type: "pie",
            radius: ["20%", "55%"],
            data: this.pieDataBuy
          }
        ]
      };
    },
    drawPieBuyDirect() {
      this.optionPieBuyDirect = {
        title: {
          // text: '全区物资类型分布',
          left: "right"
        },
        tooltip: {},
        itemStyle: {
          normal: {
            shadowBlur: 30,
            shadowColor: "rgba(0, 0, 0, 0.4)"
          }
        },
        series: [
          {
            name: "物资类型",
            type: "pie",
            radius: ["20%", "55%"],
            data: this.pieDataBuyDirect
          }
        ]
      };
    },
    drawPieOut() {
      this.optionPieOut = {
        title: {
          // text: '全区物资类型分布',
          left: "right"
        },
        tooltip: {},
        itemStyle: {
          normal: {
            shadowBlur: 30,
            shadowColor: "rgba(0, 0, 0, 0.4)"
          }
        },
        series: [
          {
            name: "物资类型",
            type: "pie",
            radius: ["20%", "55%"],
            data: this.pieDataOut
          }
        ]
      };
    },
    drawPieOutERP() {
      this.optionPieOutERP = {
        title: {
          // text: '全区物资类型分布',
          left: "right"
        },
        tooltip: {},
        itemStyle: {
          normal: {
            shadowBlur: 30,
            shadowColor: "rgba(0, 0, 0, 0.4)"
          }
        },
        series: [
          {
            name: "物资类型",
            type: "pie",
            radius: ["20%", "55%"],
            data: this.pieDataOutERP
          }
        ]
      };
    }
  },
  components: {
    XHeader,
    FormPreview,
    Card,
    Divider,
    Group,
    Cell,
    Chart
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
li {
  .title {
    padding-left: 20px;
  }
  .main-info {
    margin-bottom: 0.5em;
  }
  .sub-title {
    font-size: 0.9em;
  }
  i {
    margin-left: 10px;
  }
}
.circle {
  color: #3fc7ff;
  border: 1px solid #3fc7fa;
  border-radius: 50%;
  padding: 1em 0.2em;
  width: 100%;
}
</style>